<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="pragma"content="no-cache">
<metahttp-equiv="cache-control" content="no-cache">
<meta http-equiv="expires"content="0">
<title>Insert title here</title>
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript" src="layui/lay/modules/tree.js"></script>
</head>
<body>
	<div>
		<!-- 添加页面,默认隐藏 -->
		<form id="s_form" class="layui-form" lay-filter="s_form" action=""
			style="display: none" onsubmit="return false">

			<div class="layui-form-item" style="display: none">
				<label class="layui-form-label">ID</label>
				<div class="layui-input-block">
					<input type="text" name="id" placeholder="请输入" autocomplete="off"
						class="layui-input">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">节点名称</label>
				<div class="layui-input-block">
					<input type="text" name="Name" lay-verify=”required”
						placeholder="请输入" autocomplete="off" class="layui-input">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">父节点ID</label>
				<div class="layui-input-block">
					<input type="text" name="ParentId" id="ParentId" lay-verify=”required”
						placeholder="请输入" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">权重值</label>
				<div class="layui-input-block">
					<input type="text" name="Weight" lay-verify=”required”
						placeholder="请输入" autocomplete="off" class="layui-input">
				</div>
			</div>

		</form>
	</div>
	
	<div>
		<!-- 修改页面,默认隐藏 -->
		<form id="x_form" class="layui-form" lay-filter="x_form" action=""
			style="display: none" onsubmit="return false">

			<div class="layui-form-item" style="display: none">
				<label class="layui-form-label">ID</label>
				<div class="layui-input-block" >
					<input type="text" name="id" placeholder="请输入" autocomplete="off"
						class="layui-input">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">节点名称</label>
				<div class="layui-input-block">
					<input type="text" name="title" lay-verify=”required”
						placeholder="请输入" autocomplete="off" class="layui-input">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">父节点ID</label>
				<div class="layui-input-block">
					<input type="text" name="pid" id="pid" lay-verify=”required”
						placeholder="请输入" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">权重值</label>
				<div class="layui-input-block">
					<input type="text" name="weight" lay-verify=”required”
						placeholder="请输入" autocomplete="off" class="layui-input">
				</div>
			</div>

		</form>
	</div>
	<div class="layui-layout layui-layout-admin">
		<div class="layui-body" style="margin: 1%">

			<div id="test13" class="demo-tree-more"></div>
		</div>

		
	</div>

	<script>
layui.use(['table','layer','form','tree','laydate'], function(){
  var table = layui.table;
  var layer = layui.layer;
  var form = layui.form;
  var laydate = layui.laydate;
  var $ = layui.$;
  var tree = layui.tree;
 
  
      
$(function() {
	getData();
})
function getData(){ 
    $.ajax({
        type: "get",
        data: "id=0",
        url: "findCategoryJsonall",
        success: function (data) {
            layui.use(['tree','util','table'], function() {
                var tree = layui.tree
                    , layer = layui.layer
                    , util = layui.util
                    ,table = layui.table;
                   
                //无连接线风格
                tree.render({
                    elem: '#test13'
                    ,data: data
                     ,edit: ['add', 'update', 'del'] //操作节点的图标
                      ,operate: function(obj){
					    var type = obj.type; //得到操作类型：add、edit、del
					    var data = obj.data; //得到当前节点的数据
					    var elem = obj.elem; //得到当前节点元素
					    
					    //Ajax 操作
					    var id = data.id; //得到节点索引
					    var pid = data.pid;
					    if(type === 'add'){ //增加节点
					      //返回 key 值
					       document.getElementsByName("ParentId")[0].value = id;
					       layer.open({
							type:1,
							content:$("#s_form"),
							title:'添加节点信息',
							area:['400px','300px'],
							btn: ['添加', '取消'],
							yes: function(index, layero){
								$.post("addmod",$("#s_form").serialize(),
									function(res){
										if(res.code=='0'){	
											layer.closeAll();
											getData();
											$("#s_form")[0].reset();
											layer.msg(res.msg);
										}else{
										layer.msg(res.msg);
										}
									},'json');
					  			}
							});
					    } else if(type === 'update'){ //修改节点
					     	form.val('x_form',data);//数据回显
							layer.open({
								type:1,
								content:$("#x_form"),
								title:'修改节点信息',
								area:['400px','300px'],
								btn: ['确认修改', '取消'],
								yes: function(index, layero){
									$.post("upmod",$("#x_form").serialize(),
										function(res){
											if(res.code=='0'){							
												layer.closeAll();
												getData();
												layer.msg(res.msg);
											}else{
												layer.msg(res.msg);
											}
										},'json');
					  			}
							});
					    } else if(type === 'del'){ //删除节点
					      layer.confirm('真的删除行么', function(index){
					        $.post("daleteMod",{
					        id:data.id,
					        pid:data.pid,
					        title:data.title
					        },function(res){
					        if(res.code=='0'){
					       		 layer.closeAll();
						         layer.msg(res.msg);
						         getData();
					        }else{
						        layer.msg(res.msg);
						        getData();
					        }
					        },'json');
					      });
					    };
					  }
                });
            }) 
        }, 
    });
}

});
</script>
</body>
</html>